<template>
  <div style="height: 100%;">
    <div v-if="tradeType === 1" class="sort-title">
      <van-tabs class="sort" v-model="tabValue">
        <van-tab title="数量">
          <template #title>
            <div @click="changeAmountSort">
              <span>数量</span>
              <img class="sortImg" :src="require(`@/assets/images/${amountSort}.png`)" />
            </div>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <div @click="changePriceSort">
              <span>单价</span>
              <img class="sortImg" :src="require(`@/assets/images/${priceSort}.png`)" />
            </div>
          </template>
        </van-tab>
      </van-tabs>
      <img class="sx" src="~@/assets/images/sx.png" @click="showPop=true" />
    </div>

    <div v-if="tradeType !== 1" class="sort-title">
      <van-tabs class="sort">
        <van-tab title="数量">
          <template #title>
            <div :class="{blueText: tradeType===2}" @click="changeTradeType(2)">
              进行中
            </div>
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <div :class="{blueText: tradeType===3}" @click="changeTradeType(3)">
              已完成
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>


    <div class="content" :style="{height:tradeType==1 ? 'calc(100% - 115px)' : 'calc(100% - 190px)'}">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          style="height: 100%;overflow: auto;"
          v-model="loading"
          :finished="finished"
          :finished-text="tradeType==1?'没有更多了':''"
          @load="onLoad"
        >
          <template v-for="(item,index) in list">
            <div v-if="item.receivePayment.length!=0" class="card" :key="index">
              <div class="info">
                <img class="headImg" :src="baseData&&baseData.data.imgUrl + item.avatar" />
                <span>{{item.nickName}}</span>
                <img class="creditImg" v-if="item.grade" :src="require(`@/assets/images/creditType/${item.grade}.png`)" />
              </div>
              <div class="line1">
                <span class="t1">可售</span>
                <span class="t2">{{item.transTotalCount.toFixed(2)}} B</span>
              </div>
              <div class="line2">
                <span class="t1">单价</span>
                <span class="t2"> ¥ {{item.transPrice.toFixed(2)}}</span>
              </div>
              <div class="line3">
                <img :src="require(`@/assets/images/receivePayment/${item}.png`)" v-for="(item,index) in item.receivePayment" :key="index" />
              </div>
              <div class="right">
                <div class="line1" :class="{hide: tradeType!==1}">成交量  {{item.successCount>99?'99+':item.successCount}}&nbsp;&nbsp;|&nbsp;&nbsp;{{parseInt(item.closeRate)}}%</div>
                <div class="line2" v-if="tradeType===1">
                  <span class="t1">{{item.minPrice.toFixed(2)}} B</span>
                  <span class="t2">最小起售</span>
                </div>
                <div class="line2" v-else-if="tradeType!==1">
                  <span class="t1">{{item.transValidCount.toFixed(2)}} B</span>
                  <span class="t2">&nbsp;&nbsp;|&nbsp;&nbsp;剩余</span>
                </div>

                <template v-if="tradeType === 1">
                  <div class="btn" @click="$router.push({
                    name: 'buy',
                    query: {
                      transOrderNo: item.transOrderNo
                    }
                  })">购买</div>
                </template>
                <template v-else-if="tradeType === 2">
                  <!-- 出售中 -->
                  <div class="flex" v-if="item.transStatus === 10001 || item.transStatus === 10004
                  ">
                    <div class="btn" @click="confirmTrans(6,item)">暂停</div>
                  </div>
                  <!-- 暂停出售 -->
                  <div class="flex" v-if="item.transStatus === 10002">
                    <div class="btn2" @click="confirmTrans(8,item)">关闭</div>
                    <div class="btn" @click="confirmTrans(7,item)">恢复</div>
                  </div>
                </template>
                <template v-else-if="tradeType === 3">
                  <!-- 出售中 -->
                  <div class="flex" v-if="item.transStatus === 10007">
                    <div class="greenT">挂单已完成</div>
                  </div>
                  <!-- 暂停出售 -->
                  <div class="flex" v-if="item.transStatus === 10015">
                    <div class="redT">挂单已关闭</div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
      <div class="nodata2" v-if="(tradeType==2||tradeType==3)&&list.length==0&&!loading">
        <div></div>
        <img src="~@/assets/images/nodata2.png" />
        <span>当前没有{{tradeType==2?'出售中':'已完成'}}的订单<br />可点击下方按钮出售98B</span>
      </div>
    </div>

    <div v-if="tradeType!==1" class="bigBtn">
      <div>出售</div>
    </div>

    <van-popup v-model="showPop" round closeable position="bottom" :style="{ height: 'auto' }">
      <div class="popModel">
        <div class="title1">筛选</div>
        <div class="c">
          <div class="range">
            <div class="title">支付方式</div>
            <div class="models">
              <div class="item" v-for="(item,index) in payeeTypes" :key="index" @click="changePayeeType(index)" :class="{checked: payeeTypeIndex.indexOf(index)!=-1}">
                {{item.name}}
              </div>
            </div>
          </div>
          <div class="range">
            <div class="title">数量区间</div>
            <div class="amount">
              <input placeholder="自定义最低数量" v-model="minCount1" @input="(e)=>{changeCount1(e.target.value,'minCount')}" />
              <div class="line"></div>
              <input placeholder="自定义最高数量" v-model="maxCount1" @input="(e)=>{changeCount1(e.target.value,'maxCount')}" />
            </div>
            <div class="models">
              <div class="item" v-for="(item,index) in amountList" :key="index" @click="changeAmountType(index)" :class="{checked: amountRangeIndex===index}">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <div class="btn1" @click="reset">重置</div>
          <div class="btn2" @click="handle">确认</div>
        </div>
      </div>
    </van-popup>

    <van-dialog v-model="dialogShow" className="orderPopClass" title="温馨提示" show-cancel-button @confirm="confirm">
      {{warningMessage}}
    </van-dialog>
  </div>
</template>

<script>
  import api from "@/api/trade";
  import { mapState, mapActions } from "vuex";
  import { Dialog } from 'vant';
  let that = {
    source: null
  }
  export default {
    props:['tradeType'],
    data() {
      return {
        list: [],
        showPop: false,
        loading: true,
        finished: false,
        refreshing: false,
        pageSize: 20,
        currentPage: 1,
        tabValue: 0,
        amountSort: 'defaultSort',
        priceSort: 'defaultSort',
        sortObg: {
          sortName: '',
          sortType: '',
        },
        minCount1: '',
        maxCount1: '',
        amountRangeIndex: 0,
        amountList: [
          {
            name: '全部',
            amountRange: {
              minCount: '',
              maxCount: ''
            }
          },
          {
            name: '100-1k',
            amountRange: {
              minCount: '100',
              maxCount: '1000'
            }
          },
          {
            name: '1k-3k',
            amountRange: {
              minCount: '1000',
              maxCount: '3000'
            }
          },
          {
            name: '3k-8k',
            amountRange: {
              minCount: '3000',
              maxCount: '8000'
            }
          },
          {
            name: '8k-12k',
            amountRange: {
              minCount: '8000',
              maxCount: '12000'
            }
          },
          {
            name: '12k以上',
            amountRange: {
              minCount: '12000',
              maxCount: ''
            }
          },
        ],
        amountRange: {
          minCount: '',
          maxCount: ''
        },
        payeeType: [],
        payeeTypeIndex: [0],
        payeeTypes: [
          {
            name: '全部',
            value: ''
          },
          {
            name: '银行卡',
            value: '3'
          },
          {
            name: '微信',
            value: '4'
          },
          {
            name: '支付宝',
            value: '5'
          },
          {
            name: '数字人民币',
            value: '6'
          },
          {
            name: 'QQ',
            value: '7'
          },
        ],

        confirmParams: {},
        warningMessage: '',
        dialogShow: false,
      }
    },
    computed: {
      ...mapState({
        baseData: state => state.global.baseData
      }),
    },
    watch:{
      tradeType(val){
        this.onRefresh()
      }
    },
    methods: {
      confirmTrans(transType, data){
        // transType
        //   1.取消交易
        //   2.同意交易
        //   3.延迟发货
        //   4.中止发货
        //   5.发货
        //   8.关闭交易
        this.confirmParams = {}
        this.warningMessage = ''
        if(transType === 6){
        //6.暂停交易
          this.confirmParams = {
            transType,
            saleId: data.id
          }
          this.warningMessage = '交易正在进行中，您确定要暂停吗'
        }else if(transType === 7){
        //7.重新出售
          this.confirmParams = {
            transType,
            saleId: data.id
          }
          this.warningMessage = '您确定要恢复订单吗'
        }else if(transType === 8){
        //8.重新出售
          this.confirmParams = {
            transType,
            saleId: data.id
          }
          this.warningMessage = '您确定要关闭订单吗'
        }
        this.dialogShow = true;
      },
      confirm(){
        api.confirmTrans(this.confirmParams).then(res => {
          if(res.data.code == 0){
            this.onRefresh()
          }
        });
      },
      changeCount1(value,name){
        this.amountRangeIndex='';
        if(name == 'minCount'){
          this.amountRange.minCount = value;
          if(this.maxCount1 === '') this.amountRange.maxCount = '';
        }else if(name == 'maxCount'){
          this.amountRange.maxCount = value;
          if(this.minCount1 === '') this.amountRange.minCount = '';
        }
      },
      changeAmountType(index){
        this.maxCount1 = '';
        this.minCount1 = '';
        this.amountRangeIndex = index;
        this.amountRange = this.amountList[this.amountRangeIndex].amountRange;
      },
      changePayeeType(index){
        if(index == 0){
          this.payeeTypeIndex = [0]
        }else{
          this.payeeTypeIndex = this.payeeTypeIndex.filter(item => item !== 0);
          if(this.payeeTypeIndex.indexOf(index) == -1){
            this.payeeTypeIndex.push(index)
          }else{
            this.payeeTypeIndex = this.payeeTypeIndex.filter(item => item !== index);
          }
        }

      },
      changeInput(value,name){
        this.amountRange[name] = value;
      },
      reset() {
        this.minCount1 = '';
        this.maxCount1 = '';
        this.amountRangeIndex = 0;
        this.payeeTypeIndex = [0];
      },
      handle() {
        this.payeeType = []
        this.payeeTypeIndex.forEach(item=>{
          this.payeeType.push(this.payeeTypes[item].value)
        })
        this.onRefresh()
        console.log(this.amountRange)
        this.showPop = false;
      },
      onRefresh() {
        this.list = []
        this.currentPage = 1;
        this.finished = false;
        this.onLoad(true);
      },
      filterEmptyValues(obj) {
        // 使用Object.entries()方法获取对象的键值对数组
        return Object.fromEntries(
          Object.entries(obj).filter(([key, value]) =>
            value !== null && value !== undefined && value !== ''
          )
        );
      },
      onLoad(flag=false) {
        this.loading = true;
        let params = {
          type: this.tradeType,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }
        if(this.tradeType === 1){
          params = {
            ...params,
            ...this.sortObg,
            ...this.amountRange,
            payeeType: this.payeeType.join(),
          }
        }
        params = this.filterEmptyValues(params)
        if (typeof that.source === "function") {
          that.source("终止请求"); //取消请求
        }
        api.saleList(params,that).then(res => {
          if(res.data.code == 0){
            res.data.data.records.forEach(item=>{
              item.receivePayment = new Array;
              item.receivePaymentType.split(',').forEach(xitem=>{
                if(['3','4','5','6','7'].indexOf(xitem)!==-1){
                  item.receivePayment.push(xitem)
                }
              })
            })
            if(flag){
              this.list = res.data.data.records || [];
            }else{
              this.list = this.list.concat(res.data.data.records || []);
            }
            // 数据全部加载完成
            if (res.data.data.hasNext == false) {
              this.finished = true;
            }else{
              this.currentPage ++;
            }
          }
          this.loading = false;
          this.refreshing = false;
        });
      },
      changeTradeType(val){
        this.$parent.changeTradeType(val)
      },
      changeAmountSort(){
        this.priceSort = 'defaultSort'
        if(this.amountSort == 'defaultSort'){
          this.amountSort = 'upSort';
          this.sortObg = {
            sortName: 'TRANS_VALID_COUNT',
            sortType: 'asc',
          }
        }else if(this.amountSort == 'upSort'){
          this.amountSort = 'downSort';
          this.sortObg = {
            sortName: 'TRANS_VALID_COUNT',
            sortType: 'desc',
          }
        }else if(this.this.amountSort == 'downSort'){
          this.amountSort = 'defaultSort';
          this.sortObg = {
            sortName: '',
            sortType: '',
          }
        }
        this.onRefresh()
      },
      changePriceSort(){
        this.amountSort = 'defaultSort';
        if(this.priceSort == 'defaultSort'){
          this.priceSort = 'upSort';
          this.sortObg = {
            sortName: 'TRANS_PRICE',
            sortType: 'asc',
          }
        }else if(this.priceSort == 'upSort'){
          this.priceSort = 'downSort';
          this.sortObg = {
            sortName: 'TRANS_PRICE',
            sortType: 'desc',
          }
        }else if(this.priceSort == 'downSort'){
          this.priceSort = 'defaultSort';
          this.sortObg = {
            sortName: '',
            sortType: '',
          }
        }
        this.onRefresh()
      },
    },
    mounted() {
      this.onLoad()
    },
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .contents{
    background: #F0F5FD;
    height: 100%;
    .blueText{
      color: #479FFF;
    }
    .nodata2{
      background: #fff;
      height: 100%;
      div{
        height: 15px;
      }
      img{
        width: 161px;
        height: 145.5px;
        display: block;
        text-align: center;
        margin: 0 auto;
      }
      span{
        display: block;
        font-size: 14px;
        color: #8F949C;
        text-align: center;
        margin-top: 15px;
      }
    }
    .bigBtn{
      background: #fff;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      div{
        width: calc(100% - 54px);
        background: #479fff;
        border-radius: 4px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: 44px;
      }
    }
    .popModel{
      .title1{
        line-height: 56px;
        text-align: center;
        border-bottom: 1px solid #EFF0F3;
        font-size: 16px;
        font-weight: Medium;
        color: #222222;
      }
      .c{
        padding: 20px 15px 0 15px;
      }
      .btns{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px 20px 15px;
        .btn1{
          width: calc(50% - 5px);
          height: 44px;
          line-height: 44px;
          text-align: center;
          border: 1px solid #479fff;
          border-radius: 4px;
          color: #479FFF;
          font-size: 14px;
        }
        .btn2{
          width: calc(50% - 5px);
          height: 44px;
          line-height: 44px;
          text-align: center;
          background: #479fff;
          border-radius: 4px;
          color: #fff;
          font-size: 14px;
        }
      }
      .range{
        margin-bottom: 10px;
        .title{
          height: 20px;
          font-size: 14px;
          font-weight: Medium;
          color: #444444;
          line-height: 20px;
          margin-bottom: 8px;
        }
        .amount{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          input{
            width: 45%;
            line-height: 40px;
            height: 40px;
            background: #f7f7f7;
            border-radius: 4px;
            font-size: 13px;
            border: none;
            outline: none;
            text-align: center;
          }
          .line{
            width: 5%;
            height: 1.5px;
            background: #eff0f3;
          }
        }
        .models{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .item{
            width: calc(33% - 5px);
            height: 36px;
            background: #f7f7f7;
            border-radius: 4px;
            font-size: 13px;
            font-weight: Regular;
            text-align: center;
            color: #444444;
            line-height: 36px;
            margin-bottom: 7.5px;
          }
          .checked{
            background: #ebf5ff;
            border: 1px solid #479fff;
            border-radius: 4px;
          }
        }
      }
    }
    .top{
      padding-top: 12px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding-bottom: 15px;
      .tabs{
        span{
          width: 68px;
          height: 24px;
          font-size: 17px;
          font-weight: Medium;
          text-align: left;
          color: #8f949c;
          line-height: 24px;
          margin: 15px;
        }
        .checked{
          color: #222222;
          position: relative;
          &::after{
            content: '';
            width: 40px;
            height: 5px;
            background: #479fff;
            display: block;
            position: absolute;
            bottom: -6px;
            left: 12px;
          }
        }
      }
      .tabs2{
        display: flex;
        width: 123px;
        height: 27px;
        background: #ffffff;
        border-radius: 13.5px;
        overflow: hidden;
        align-items: center;
        line-height: 27px;
        margin-right: 15px;
        span{
          color: #8f949c;
          width: 50%;
          line-height: 27px;
          font-size: 13px;
          font-weight: Regular;
          text-align: center;
          color: #8f949c;
          line-height: 27px;
        }
        .checked{
          background: #479FFF;
          color: #fff;
          border-radius: 12px;
        }
      }
    }
    .sort-title{
      background: #fff;
      position: relative;
      border-bottom: 1px solid #EFF0F3;
      .sort{
        width: 150px;
        .sortImg{
          width: 7px;
          height: 10px;
          margin-left: 4px;
        }
        span{
          font-size: 13px;
          color: #666666;
        }
        /deep/.van-tabs__line{
          display: none;
        }
      }
      .sx{
        width: 18px;
        height: 18px;
        position: absolute;
        right: 27px;
        top: 13px;
      }
    }
    .content{
      height: calc(100% - 115px);
      overflow-y: auto;
    }
    .card{
      padding: 15px;
      border-bottom: 1px solid #EFF0F3;
      background: #fff;
      position: relative;
      .info{
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        .headImg{
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .creditImg{
          width: 38px;
          height: 14px;
        }
        span{
          height: 20px;
          font-size: 14px;
          font-weight: Regular;
          color: #444444;
          line-height: 20px;
          margin: 0 8px;
        }
      }
      .line1{
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        .t1{
          height: 14px;
          font-size: 10px;
          font-weight: Regular;
          color: #8f949c;
          line-height: 14px;
          margin-right: 8px;
        }
        .t2{
          height: 17px;
          font-size: 17px;
          font-weight: Medium;
          color: #444444;
          line-height: 17px;
        }
      }
      .line2{
        height: 14px;
        font-size: 10px;
        font-weight: Regular;
        margin-bottom: 5px;
        .t1{
          color: #8f949c;
          margin-right: 8px;
        }
        .t2{
          color: #444444;
        }
      }
      .line3{
        display: flex;
        align-items: center;
        img{
          width: 14px;
          height: 14px;
          margin-right: 8px;
        }
      }
      .right{
        position: absolute;
        right: 15px;
        top: 18px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .hide{
          opacity: 0;
        }
        .line1{
          height: 14px;
          font-size: 10px;
          font-weight: Regular;
          color: #8f949c;
          line-height: 14px;
          margin-bottom: 8px;
        }
        .line2{
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          .t1{
            height: 17px;
            font-size: 17px;
            font-weight: Medium;
            color: #444444;
            line-height: 17px;
            margin-right: 8px;
          }
          .t2{
            height: 14px;
            font-size: 10px;
            font-weight: Regular;
            color: #8f949c;
            line-height: 14px;
          }
        }
        .flex{
          display: flex;
          align-items: center;
          .redT{
            color: red;
            font-size: 18px;
          }
          .greenT{
            color: limegreen;
            font-size: 18px;
          }
        }
        .btn{
          width: 60px;
          text-align: center;
          color: #fff;
          line-height: 27px;
          height: 27px;
          background: #479fff;
          border-radius: 4px;
          font-size: 13px;
          margin-left: 10px;
        }
        .btn2{
          width: 60px;
          text-align: center;
          color: #479fff;
          border: 1px solid #479fff;
          line-height: 27px;
          height: 27px;
          background: #fff;
          border-radius: 4px;
          font-size: 13px;
          margin-left: 10px;
        }
      }
    }
  }
  .orderPopClass{
    padding: 10px;
    /deep/.van-dialog__footer{
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    /deep/.van-dialog__cancel{
      width: calc(50% - 8px);
      height: 44px;
      line-height: 44px;
      font-size: 15px;
      text-align: center;
      border: 1px solid #479fff;
      border-radius: 4px;
      background-color: #fff;
      color: #479FFF;
      flex: none;
    }
    /deep/.van-dialog__confirm{
      width: calc(50% - 8px);
      height: 44px;
      line-height: 44px;
      font-size: 15px;
      text-align: center;
      background: #479fff;
      border-radius: 4px;
      color: #fff;
      flex: none;
    }
    /deep/.van-dialog__content{
      line-height: 70px;
      text-align: center;
    }
  }
</style>
